<!--
  智慧社区管理系统 - 安保路线详情页面
  严格按照《App端编码规范权威标准声明.md》数据详情页面规范实现
  
  @author Wu.Liang
  @date 2025-01-30
  @description 安保路线详情查看功能，支持基于数据权限的社区信息显示
-->
<template>
  <view class="data-detail-page">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <u-loading-icon mode="spinner" size="40" color="#409EFF"></u-loading-icon>
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 数据状态卡片 -->
    <view class="status-section" v-if="dataInfo && !loading">
      <view class="status-card">
        <view class="status-header">
          <text class="status-title">{{ dataInfo.routeName }}</text>
          <view class="status-tag">
            <u-tag 
              :text="getStatusText(dataInfo.status)" 
              :type="getStatusType(dataInfo.status)" 
              size="mini"
            />
          </view>
        </view>
        <view class="status-desc">{{ getStatusDescription(dataInfo.status) }}</view>
      </view>
    </view>

    <!-- 基本信息 -->
    <view class="info-section" v-if="dataInfo && !loading">
      <view class="info-card">
        <view class="card-title">基本信息</view>
        <view class="info-list">
          <view class="info-item">
            <view class="info-label">
              <u-icon name="map-pin" size="16" color="#666"></u-icon>
              <text>路线类型</text>
            </view>
            <text class="info-value">{{ getRouteTypeText(dataInfo.routeType) }}</text>
          </view>
          <view class="info-item">
            <view class="info-label">
              <u-icon name="home" size="16" color="#666"></u-icon>
              <text>所属社区</text>
            </view>
            <text class="info-value">{{ dataInfo.communityName || '--' }}</text>
          </view>
          <view class="info-item">
            <view class="info-label">
              <u-icon name="clock" size="16" color="#666"></u-icon>
              <text>巡逻频次</text>
            </view>
            <text class="info-value">{{ getFrequencyText(dataInfo.frequency) }}</text>
          </view>
          <view class="info-item">
            <view class="info-label">
              <u-icon name="time" size="16" color="#666"></u-icon>
              <text>预计时长</text>
            </view>
            <text class="info-value">{{ dataInfo.durationMinutes ? dataInfo.durationMinutes + '分钟' : '--' }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 详细信息 -->
    <view class="detail-section" v-if="dataInfo && !loading">
      <view class="detail-card">
        <view class="card-title">详细信息</view>
        <view class="detail-list">
          <view class="detail-item" v-if="dataInfo.description">
            <text class="detail-label">路线描述</text>
            <text class="detail-value">{{ dataInfo.description }}</text>
          </view>
          <view class="detail-item" v-if="dataInfo.checkpoints">
            <text class="detail-label">检查点配置</text>
            <text class="detail-value">{{ getCheckpointsText(dataInfo.checkpoints) }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">创建时间</text>
            <text class="detail-value">{{ formatTime(dataInfo.createTime) }}</text>
          </view>
          <view class="detail-item" v-if="dataInfo.updateTime">
            <text class="detail-label">更新时间</text>
            <text class="detail-value">{{ formatTime(dataInfo.updateTime) }}</text>
          </view>
          <view class="detail-item" v-if="dataInfo.createByName">
            <text class="detail-label">创建人</text>
            <text class="detail-value">{{ dataInfo.createByName }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-section" v-if="dataInfo && !loading && canShowAction">
      <u-button 
        type="primary" 
        text="编辑路线"
        size="large"
        @click="goToEdit"
        class="action-button"
      />
    </view>
    
    <!-- 错误状态 -->
    <view v-if="errorMessage && !loading" class="error-container">
      <u-empty 
        text="加载失败" 
        icon="error-circle"
        mode="error"
      />
      <u-button 
        type="primary" 
        text="重新加载"
        size="normal"
        @click="loadRouteDetail"
        class="retry-button"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getSecurityRouteById } from '@/api/security'

// ========================= 响应式数据 =========================

// 数据状态
const dataInfo = ref(null)
const loading = ref(false)
const errorMessage = ref('')
const dataId = ref('')

// ========================= 计算属性 =========================

const canShowAction = computed(() => {
  if (!dataInfo.value) return false
  // 根据业务逻辑判断是否可以编辑
  // 这里可以根据用户权限或路线状态来判断
  return true
})

// ========================= 生命周期 =========================

onLoad((options) => {
  if (options.id) {
    dataId.value = options.id
    loadRouteDetail()
  } else {
    errorMessage.value = '缺少路线ID参数'
  }
})

// ========================= 方法定义 =========================

/**
 * 加载路线详情
 */
const loadRouteDetail = async () => {
  if (!dataId.value) {
    errorMessage.value = '缺少路线ID参数'
    return
  }
  
  try {
    loading.value = true
    errorMessage.value = ''
    
    const response = await getSecurityRouteById(dataId.value)
    if (response.success && response.data) {
      dataInfo.value = response.data
    } else {
      errorMessage.value = response.message || '加载路线详情失败'
    }
  } catch (error) {
    console.error('加载路线详情失败:', error)
    errorMessage.value = '加载路线详情失败，请重试'
  } finally {
    loading.value = false
  }
}

/**
 * 跳转到编辑页面
 */
const goToEdit = () => {
  uni.navigateTo({
    url: `/pages/property-work/security-management/route-edit?id=${dataId.value}`
  })
}

// ========================= 工具方法 =========================

/**
 * 获取路线类型文本
 */
const getRouteTypeText = (type) => {
  const typeMap = {
    'patrol': '巡逻路线',
    'checkpoint': '检查点'
  }
  return typeMap[type] || '未知类型'
}

/**
 * 获取频次文本
 */
const getFrequencyText = (frequency) => {
  const frequencyMap = {
    'hourly': '每小时',
    'every_2_hours': '每2小时',
    'daily': '每日'
  }
  return frequencyMap[frequency] || '未知频次'
}

/**
 * 获取状态文本
 */
const getStatusText = (status) => {
  const statusMap = {
    1: '启用',
    2: '停用'
  }
  return statusMap[status] || '未知状态'
}

/**
 * 获取状态类型
 */
const getStatusType = (status) => {
  const typeMap = {
    1: 'success',
    2: 'error'
  }
  return typeMap[status] || 'info'
}

/**
 * 获取状态描述
 */
const getStatusDescription = (status) => {
  const descMap = {
    1: '路线已启用，可以正常使用',
    2: '路线已停用，暂时不可使用'
  }
  return descMap[status] || '状态描述未知'
}

/**
 * 获取检查点文本
 */
const getCheckpointsText = (checkpoints) => {
  if (!checkpoints) return '--'
  
  try {
    const data = typeof checkpoints === 'string' ? JSON.parse(checkpoints) : checkpoints
    if (Array.isArray(data)) {
      return `共${data.length}个检查点`
    }
    return '检查点配置'
  } catch (error) {
    return '检查点配置'
  }
}

/**
 * 格式化时间
 */
const formatTime = (time) => {
  if (!time) return '--'
  const date = new Date(time)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style lang="scss" scoped>
.data-detail-page {
  min-height: 100vh;
  width: 100%;
  background: #f5f5f5;
  padding-bottom: 120rpx;
  box-sizing: border-box;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #666;
  }
}

.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .retry-button {
    margin-top: 40rpx;
    width: 200rpx;
  }
}

.status-section, .info-section, .detail-section, .action-section {
  padding: 0 20rpx 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.status-card, .info-card, .detail-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #f0f0f0;
  }
}

.status-card {
  .status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    
    .status-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .status-desc {
    font-size: 26rpx;
    color: #666;
    line-height: 1.4;
  }
}

.info-list, .detail-list {
  .info-item, .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;
    border-bottom: 1rpx solid #f8f8f8;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      display: flex;
      align-items: center;
      gap: 12rpx;
      flex-shrink: 0;
      width: 160rpx;
      
      text {
        font-size: 26rpx;
        color: #666;
      }
    }
    
    .info-value, .detail-value {
      font-size: 26rpx;
      color: #333;
      text-align: right;
      flex: 1;
      word-break: break-all;
    }
    
    .detail-label {
      font-size: 26rpx;
      color: #666;
    }
    
    .detail-value {
      font-size: 26rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.action-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: white;
  padding: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  
  .action-button {
    width: 100%;
  }
}

/* 响应式适配 */
@media screen and (max-width: 375px) {
  .status-section, .info-section, .detail-section {
    padding: 0 15rpx 15rpx;
  }
  
  .status-card, .info-card, .detail-card {
    padding: 20rpx;
  }
}

@media screen and (min-width: 769px) {
  .data-detail-page {
    max-width: 800px;
    margin: 0 auto;
  }
}
</style>
